<template>
  <div class="process" :class="{ first: index === 0, end: isEnd }">
    <div class="title">
      <a-space>
        <span>{{ index + 1 }} {{ nameCopy }}</span>
        <a-icon type="edit" @click="editProcessItem"></a-icon>
        <a-popconfirm title="确认要删除流程吗" @confirm="delProcessItem">
          <a-icon type="delete"></a-icon>
        </a-popconfirm>
      </a-space>
    </div>
    <TemplateConfigTable :dataSource="fieldsCopy" @editOk="editField" @delItem="deleteField" @sortItem="sortField" />
  </div>
</template>
<script>
import TemplateConfigTable from "../components/templateConfigTable.vue";
import { generateFieldItem } from "./funcs";
export default {
  name: "",
  components: { TemplateConfigTable },
  mixins: [],
  props: {
    dataSource: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    },
    isEnd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nameCopy: "",
      fieldsCopy: []
    };
  },
  computed: {},
  watch: {
    dataSource: {
      handler(val) {
        this.nameCopy = val.name;
        this.fieldsCopy = val.fields;
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    editField({ params, mode, index }) {
      if (mode === "add") {
        const newItem = generateFieldItem(params);
        this.$emit("updateItem", this.index, {
          name: this.nameCopy,
          fields: [...this.fieldsCopy, newItem]
        });
      } else if (mode === "edit") {
        const tempLst = [...this.fieldsCopy];
        tempLst[index] = generateFieldItem(params, tempLst[index]);
        this.$emit("updateItem", this.index, {
          name: this.nameCopy,
          fields: tempLst
        });
      }
    },
    sortField(oldIdx, newIdx) {
      const tempLst = [...this.fieldsCopy];
      const oldItem = tempLst[oldIdx];
      tempLst.splice(oldIdx, 1);
      tempLst.splice(newIdx, 0, oldItem);
      tempLst.forEach((item, index) => {
        item.sort = index + 1;
      });
      this.$emit("updateItem", this.index, {
        name: this.nameCopy,
        fields: tempLst
      });
    },
    deleteField(index) {
      const tempLst = [...this.fieldsCopy];
      tempLst.splice(index, 1);
      this.$emit("updateItem", this.index, {
        name: this.nameCopy,
        fields: tempLst
      });
    },
    delProcessItem() {
      this.$emit("delItem", this.index);
    },
    editProcessItem() {
      this.$emit("editItem", this.index);
    }
  }
};
</script>
<style lang="scss" scoped>
.process {
  border-left: 1px solid rgba(232, 232, 232, 1);
  padding: 12px 16px;
  position: relative;
  &.first {
    margin-top: -12px;
    &::after {
      position: absolute;
      content: "";
      left: -1px;
      top: 0;
      height: 20px;
      width: 2px;
      background: #fff;
      z-index: 1;
    }
  }
  &.end {
    padding-bottom: 24px;
  }
}

.title {
  margin-bottom: 16px;
  &::after {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--primary);
    top: 17px;
    left: -7px;
    z-index: 2;
  }
  ::v-deep .anticon {
    color: var(--primary);
    cursor: pointer;
  }
}
</style>
